<template>
  <div class="map-card">
    <div class="map-content" ref="map" id="map"></div>
    <div class="show-lon-lat">
      <div class="lon-lat">LV_{{ currentOptions.zoom.toFixed(0) }}</div>
      <div class="show-item">
        {{ transfLonAndLat(currentOptions.center[0], "lon", true) }}
      </div>
      <div class="show-item">
        {{ transfLonAndLat(currentOptions.center[1], "lat", true) }}
      </div>
    </div>
    <div class="map-tool">
      <div class="map-tool-item">
        <el-input-number
          v-model="mapToolInfo.mapZoom"
          @change="handleZoomChange"
          :min="4"
          :max="18"
          label="LEVEL"
        ></el-input-number>
      </div>
      <div class="map-tool-item map-tool-switch">
        <div class="map-tool-text">AIS</div>
        <div
          :class="['map-tool-switch-box', { active: mapToolInfo.AIS }]"
          @click="AISChange"
        >
          <div class="map-tool-slider">
            {{ mapToolInfo.AIS ? "ON" : "OFF" }}
          </div>
        </div>
      </div>
      <div class="map-tool-item map-tool-switch">
        <div class="map-tool-text">ARPA</div>
        <div
          :class="['map-tool-switch-box', { active: mapToolInfo.radar }]"
          @click="radarChange"
        >
          <div class="map-tool-slider">
            {{ mapToolInfo.radar ? "ON" : "OFF" }}
          </div>
        </div>
      </div>
      <div
        class="map-tool-item map-tool-switch map-tool-ship"
        @click="moveTo()"
      >
        <i class="iconfont">&#xe605;</i>
        <div class="map-tool-ship-text">Back to Ship</div>
      </div>
    </div>
  </div>
</template>

<script>
import xMaps from "x-maps";
import "x-maps/xMaps.css";
import { transfLonAndLat } from "@/utils/chart.js";
import { getLatest as getAISLatest } from "@/api/cabin/aisData";
import { getLatest as getRadarLatest } from "@/api/cabin/radarData";
let AISInterval = null;
let GPSInterval = null;
const MAPURL = process.env.VUE_APP_MAP_URL;

export default {
  props: {
    shipInfo: {
      type: Object,
      default: () => {
        return {
          lon: 0,
          lat: 0,
          hod: 0,
        };
      },
    },
  },
  data() {
    return {
      transfLonAndLat,
      isActive: false, // 默认关闭
      map: null,
      mapToolInfo: {
        mapZoom: 14,
        AIS: true,
        radar: false,
      },
      options: {
        center: [119.59355478904757, 32.25841220407902],
        // center: [55.267667331355604, 25.251420152303808],
        zoom: 14,
        id: "map",
        minZoom: 4,
        maxZoom: 17,
        scale: true,
        mapUrl: MAPURL,
        // mapUrl: "mapApi/{z}/{x}/{y}.png",
      },
      currentOptions: {
        zoom: 0,
        mouseCenter: [0, 0],
        center: [0, 0],
      },
      AISList: [],
      radarList: [],
      isFirst: false,
    };
  },
  computed: {},
  methods: {
    shipMove(row) {
      this.map.drawShips([row], {
        id: "my_ships",
        color: "#3ADEAB",
      });
      if (!this.isFirst && row.lon && row.lat) {
        this.isFirst = true;
        this.moveTo(row);
        setTimeout(() => {
          this.startInterval();
        }, 1000);
      }
    },
    otherShipMove(row) {
      row.heading = row.hod;
      const index = this.AISList.findIndex((m) => m.mmsi === row.mmsi);
      if (index >= 0) {
        this.AISList[index] = row;
      } else {
        this.AISList.push(row);
      }
      this.map.drawShips(this.AISList, {
        id: "other_ships",
        color: "#FFFF66",
      });
    },
    radarShipMove(row) {
      row.heading = row.hod;
      const index = this.radarList.findIndex((m) => m.mmsi === row.mmsi);
      if (index >= 0) {
        this.radarList[index] = row;
      } else {
        this.radarList.push(row);
      }
      this.map.addMarkers({
        list: this.radarList,
        icon: "/img/map/radar.png",
        id: "radar_marker",
        style: {
          iconSize: 1.5,
        },
      });
    },
    moveTo(row = this.shipInfo) {
      this.map.moveTo({
        center: [row.lon, row.lat],
        zoom: this.currentOptions.zoom,
      });
    },
    handleZoomChange() {
      this.map.setZoom(this.mapToolInfo.mapZoom);
    },
    AISChange() {
      this.mapToolInfo.AIS = !this.mapToolInfo.AIS;
      if (this.mapToolInfo.AIS) {
        this.mapToolInfo.radar = false;
        this.map.removeLayer("radar_marker");
        this.getAISLatest();
      } else {
        this.map.removeLayer("other_ships");
        this.map.removeLayer("ship_name");
      }
    },
    radarChange() {
      this.mapToolInfo.radar = !this.mapToolInfo.radar;
      if (this.mapToolInfo.radar) {
        this.mapToolInfo.AIS = false;
        this.map.removeLayer("other_ships");
        this.map.removeLayer("ship_name");
        this.getRadarLatest();
      } else {
        this.map.removeLayer("radar_marker");
      }
    },
    getAISLatest() {
      if (!this.mapToolInfo.AIS) return;
      const Bounds = this.map.map.getBounds();
      const sw = Bounds.getSouthWest();
      const ne = Bounds.getNorthEast();
      const params = {
        minLat: sw.lat,
        maxLat: ne.lat,
        minLon: sw.lng,
        maxLon: ne.lng,
      };
      getAISLatest(params).then(({ data }) => {
        if (!this.mapToolInfo.AIS) return;
        this.AISList = data.map((m) => {
          m.heading = m.hod;
          m.title = m.shipName;
          return m;
        });
        this.map.drawShips(this.AISList, {
          id: "other_ships",
          color: "#FFFF66",
        });
        this.map.addMarkers({
          list: this.AISList,
          icon: "/img/map/shipName.png",
          id: "ship_name",
          style: {
            iconSize: 1,
            textAnchor: "top",
            textSize: 12,
          },
        });
      });
    },
    getRadarLatest() {
      if (!this.mapToolInfo.radar) return;
      getRadarLatest().then(({ data }) => {
        if (!this.mapToolInfo.radar) return;
        this.radarList = data.map((m) => {
          m.lon = m.targetLon;
          m.lat = m.targetLat;
          return m;
        });
        this.map.addMarkers({
          list: this.radarList,
          icon: "/img/map/radar.png",
          id: "radar_marker",
          style: {
            iconSize: 1,
          },
        });
      });
    },
    startInterval() {
      this.getAISLatest();
      AISInterval = setInterval(() => {
        this.getAISLatest();
      }, 15 * 1000);
      this.getRadarLatest();
      GPSInterval = setInterval(() => {
        this.getRadarLatest();
      }, 15 * 1000);
    },
    closeInterval() {
      clearInterval(AISInterval);
      clearInterval(GPSInterval);
    },
  },
  watch: {
    shipInfo: {
      handler(val, oldVal) {
        if (val.mmsi !== oldVal.mmsi) {
          this.isFirst = false;
          this.closeInterval();
        }
        const initInfo = {
          mmsi: 123456789,
          lon: 0,
          lat: 0,
          hod: 0,
        };
        if (
          val.lon !== oldVal.lon ||
          val.lat !== oldVal.lat ||
          val.hod !== oldVal.hod
        ) {
          this.shipMove({
            ...initInfo,
            ...val,
            heading: val.hod !== undefined ? val.hod : initInfo.hod,
          });
        }
      },
      deep: true,
    },
    currentOptions: {
      handler(val) {
        this.mapToolInfo.mapZoom = parseInt(val.zoom);
      },
      deep: true,
    },
  },
  mounted() {
    this.map = new xMaps();
    this.map.initMap(this.options);
    this.currentOptions = this.map.mapOptions;
  },
  destroyed() {
    this.closeInterval();
  },
};
</script>

<style scoped lang="scss">
.map-card {
  position: relative;
  .map-content {
    height: calc(100% - 60px);
    background-color: #99b3cc;
  }
  .map-tool {
    width: 100%;
    height: 60px;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .map-tool-item {
    }
  }
  .show-lon-lat {
    position: absolute;
    display: flex;
    bottom: 70px;
    left: calc(50% - 75px);
    z-index: 1000;
    background-color: hsla(0, 0%, 100%, 0.7);
    padding: 3px 5px;
    border-radius: 3px;
    .lon-lat {
      text-align: right;
      font-size: 12px;
      color: #333;
      margin-right: 5px;
    }
    .show-item {
      text-align: right;
      font-size: 12px;
      color: #333;
      width: 70px;
      margin: 0 5px;
    }
  }
}

.map-tool-switch {
  border: 1px solid #dcdfe6;
  height: 40px;
  margin-left: 40px;
  box-shadow: 1px 1px 2px #999;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  padding: 0 5px 0 10px;
  border-radius: 5px;
  .map-tool-text {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    padding: 0 10px 0 0;
  }
  .map-tool-switch-box {
    position: relative;
    width: 50px;
    height: 30px;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 3px;
    .map-tool-slider {
      border-radius: 3px;
      width: 26px;
      height: 26px;
      line-height: 26px;
      background-color: #f00;
      transition: transform 0.3s ease-in-out;
      font-size: 10px;
      text-align: center;
      color: #fff;
    }
    &.active {
      .map-tool-slider {
        background-color: #0070d6; /* 开启时的蓝色 */
        transform: translateX(18px); /* 滑块滑动 */
      }
    }
  }
}
.map-tool-ship {
  font-size: 14px;
  color: #333;
  font-weight: 700;
  padding: 0 10px;
  cursor: pointer;
  .map-tool-ship-text {
    margin-left: 5px;
  }
  &:hover {
    box-shadow: 1px 1px 2px #666;
    .map-tool-ship-text {
      color: #000;
      text-shadow: 1px 1px 2px #ccc;
    }
  }
}
</style>
